<template>
    <div class="refund-form">
        <table class="dsxui-formtable">
            <colgroup>
                <col class="w70">
                <col>
            </colgroup>
            <tbody>
            <tr>
                <td>服务类型</td>
                <td>
                    <van-radio-group v-model="refund.refund_type" class="flex-row">
                        <van-radio :name="1">仅退款</van-radio>
                        <van-radio :name="2">退款退货</van-radio>
                    </van-radio-group>
                </td>
            </tr>
            <tr>
                <td>货物状态</td>
                <td>
                    <van-radio-group v-model="refund.receive_state" class="flex-row">
                        <van-radio :name="1">已收到货</van-radio>
                        <van-radio :name="0">未收到货</van-radio>
                    </van-radio-group>
                </td>
            </tr>
            <tr>
                <td>退款原因</td>
                <td>
                    <select title="" v-model="refund.refund_reason" class="form-control">
                        <option
                                v-for="(r,i) in reasons"
                                :key="i"
                                :value="r.title"
                                style="height: 40px"
                        >
                            {{r.title}}
                        </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>退款金额</td>
                <td>
                    <div>
                        <input type="number" class="form-control" title="" v-model="refund.refund_amount">
                    </div>
                    <p class="tips">最多￥{{item.total_fee}},包含运费￥{{item.shipping_fee}}</p>
                </td>
            </tr>
            <tr>
                <td>退款说明</td>
                <td>
                    <textarea v-model="refund.refund_desc" title="" class="form-control" rows="5"></textarea>
                </td>
            </tr>
            <tr>
                <td>上传图片</td>
                <td>
                    <van-uploader
                            v-model="imgFiles"
                            :max-count="3"
                            :max-size="3 * 1024 * 1024"
                            :after-read="afterRead"
                    />
                    <p class="tips">上传凭证,最多3张</p>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td></td>
                <td>
                    <van-button size="medium" type="info" class="w200" @click="handleSubmit">提交</van-button>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
</template>

<script>
    export default {
        name: "RefundForm",
        props: {
            refund: {}
        },
        data() {
            return {
                imgFiles: [],
                submited: false
            }
        },
        methods: {
            async handleSubmit() {
                const refund = this.refund;
                const {refund_amount, refund_reason} = refund;
                if (!refund_reason) {
                    this.$showToast('请选择退款原因');
                    return false;
                }

                if (isNaN(refund_amount)) {
                    this.$showToast('退款金额必须是数字');
                    return false;
                }

                if (refund_amount <= 0) {
                    this.$showToast('退款金额必须大于0');
                    return false;
                }

                if (this.submited) {
                    return;
                } else {
                    this.submited = true;
                }

                var images = [];
                for (var i = 0; i < this.imgFiles.length; i++) {
                    var imgFile = this.imgFiles[i];
                    if (imgFile.content) {
                        var formData = new FormData();
                        formData.append('file', imgFile.file, imgFile.file.name);
                        var response = await this.$axios.post('/webapi/material/uploadimg', formData, {
                            headers: {'Content-Type': 'multipart/form-data'}
                        });
                        images.push(response.data.image);
                    } else {
                        images.push(imgFile);
                    }
                }

                const {refund_id} = refund;
                if (refund_id) {
                    this.$post('/webapi/refund/update', {refund_id, refund, images}).then(response => {
                        this.refund = response.data.refund;
                        this.showForm = false;
                    });
                } else {
                    this.$post('/webapi/refund/create', {trade_id: _config.trade_id, refund, images}).then(response => {
                        this.refund = response.data.refund;
                        this.showForm = false;
                    });
                }
            },
        }
    }
</script>

<style scoped>

</style>
